<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts Example</title>
    <!-- 引入 ECharts 库 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->

</head>
<body>
    <!-- 创建一个用于存放图表的容器 -->
    <div id="main" style="width: 600px; height: 400px;"></div>

    <script type="text/javascript">
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: ['H', 'A', 'B', 'C']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'H',
                    type: 'bar',
                    data: [5,null, null, null],
                    itemStyle: {
                        color: function(params) {
                            if (params.data === 0) {
                                return 'green';
                            } else {
                                return 'red';
                            }
                        }
                    }
                },
                {
                    name: 'A',
                    type: 'bar',
                    stack: 'A', // A项点堆叠
                    data: [null, 50, null, null],
                    itemStyle: {
                        color: 'yellow'
                    }
                },
                {
                    name: 'A-top',
                    type: 'bar',
                    stack: 'A', // A项点堆叠
                    data: [null, 30, null, null],
                    itemStyle: {
                        color: 'red'
                    }
                },
                {
                    name: 'B',
                    type: 'bar',
                    data: [null, null, 40, null],
                    itemStyle: {
                        color: 'yellow'
                    }
                },
                {
                    name: 'C-yellow',
                    type: 'bar',
                    data: [null, null, null, 30], // C的黄色柱子
                    itemStyle: {
                        color: 'yellow'
                    }
                },
                {
                    name: 'C-green',
                    type: 'bar',
                    data: [null, null, null, 20], // C的绿色柱子
                    itemStyle: {
                        color: 'green'
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>
